<template>
    <view class="container">
        <view class="profile-form">
            <!-- 头像 -->
            <view class="form-item avatar-item" @click="changeAvatar">
                <text class="label">头像</text>
                <view class="avatar-wrapper">
                    <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
                    <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
            </view>

            <!-- 基本信息 -->
            <view class="form-item">
                <text class="label">昵称</text>
                <input class="input" v-model="userInfo.nickname" placeholder="请输入昵称" />
            </view>

            <view class="form-item">
                <text class="label">性别</text>
                <picker :value="userInfo.gender" :range="genderOptions" @change="onGenderChange">
                    <view class="picker-value">
                        {{ genderOptions[userInfo.gender] || '请选择' }}
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </picker>
            </view>

            <view class="form-item">
                <text class="label">年龄</text>
                <picker :value="userInfo.age" :range="ageOptions" @change="onAgeChange">
                    <view class="picker-value">
                        {{ userInfo.age ? userInfo.age + '岁' : '请选择' }}
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </picker>
            </view>

            <view class="form-item">
                <text class="label">邮箱</text>
                <text class="readonly-text">{{ userInfo.email || '未绑定' }}</text>
            </view>
        </view>

        <!-- 修改密码区域 -->
        <view class="profile-form mt20">
            <view class="form-item" @click="handleChangePassword">
                <text class="label">修改密码</text>
                <view class="right-wrapper">
                    <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
            </view>
        </view>

        <button class="save-btn" @click="handleSave">保存修改</button>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'

const userInfo = ref({
    id: '',
    avatar: '',
    nickname: '',
    gender: '',
    age: '',
    email: ''
})

const genderOptions = ['', '男', '女']
const ageOptions = Array.from({ length: 80 }, (_, i) => i + 18) // 18-97岁

// 修改头像
const changeAvatar = async () => {
    try {
        const res = await uni.chooseImage({
            count: 1,
        })
        userInfo.value.avatar = res.tempFilePaths[0]
        // 上传图片到服务器
        const img = await request.uploadFile(res.tempFilePaths[0])
        userInfo.value.avatar = img.data
    } catch (err) {
        uni.showToast({
            title: err || '上传失败',
            icon: 'none'
        })
    }
}

// 性别选择
const onGenderChange = (e) => {
    console.log(e)
    userInfo.value.gender = e.detail.value
}

// 年龄选择
const onAgeChange = (e) => {
    userInfo.value.age = ageOptions[e.detail.value]
}

// 保存修改
const handleSave = async () => {
    if (!userInfo.value.nickname) {
        uni.showToast({
            title: '请输入昵称',
            icon: 'none'
        })
        return
    }

    if (!userInfo.value.age) {
        uni.showToast({
            title: '请选择年龄',
            icon: 'none'
        })
        return
    }

    uni.showLoading({ title: '保存中' })
    try {
        await request.post('/user/profile', {
            id: userInfo.value.id,
            nickname: userInfo.value.nickname,
            gender: userInfo.value.gender,
            age: userInfo.value.age,
            email: userInfo.value.email,
            avatar: userInfo.value.avatar
        })

        uni.setStorageSync('userInfo', userInfo.value)

        uni.hideLoading()
        uni.showToast({
            title: '保存成功',
            icon: 'success'
        })

        uni.$emit('updateUserInfo')

    } catch (err) {
        uni.hideLoading()
        uni.showToast({
            title: err || '保存失败',
            icon: 'none'
        })
    }
}

// 修改密码
const handleChangePassword = () => {
    uni.navigateTo({
        url: '/pages/user/change-password'
    })
}

// 页面加载时获取用户信息
onMounted(() => {
    const savedUserInfo = uni.getStorageSync('userInfo')
    if (savedUserInfo) {
        userInfo.value = savedUserInfo
    }
})
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx 0;
}

.profile-form {
    background: #fff;
    padding: 0 40rpx;

    .form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .label {
            font-size: 28rpx;
            color: #333;
        }

        .input {
            text-align: right;
            font-size: 28rpx;
            color: #333;
        }

        .picker-value {
            font-size: 28rpx;
            color: #333;
            display: flex;
            align-items: center;
        }

        .readonly-text {
            font-size: 28rpx;
            color: #666;
        }

        .right-wrapper {
            display: flex;
            align-items: center;
        }
    }

    .avatar-item {
        .avatar-wrapper {
            display: flex;
            align-items: center;

            .avatar {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-right: 10rpx;
            }
        }
    }
}

.mt20 {
    margin-top: 20rpx;
}

.save-btn {
    margin: 60rpx 40rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #2196F3;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;

    &:active {
        opacity: 0.9;
    }
}
</style>